<template>
  <el-dialog
    title="提示"
    :visible="visible"
    width="800px"
    top="20px"
    :before-close="handleClose">
    <div class="tag-box">
      <el-tag
        v-for="(tag, index) in tagList"
        :key="tag.id"
        closable
        @close="handleRemove(index, tag)"
        type="info">
        {{tag.roleName}}
      </el-tag>
    </div>
    <el-table :data="roleList" style="width: 100%">
      <el-table-column
        prop="roleName"
        label="角色名"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        align="center"
        width="100"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.id in tagMap"
            @click="handleRemove(scope.$index, scope.row)">移除</el-button>
          <el-button
            size="mini"
            type="text"
            v-else
            @click="handleAdd(scope.$index, scope.row)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="currentChange">
    </el-pagination>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>


<script>
export default {
  // tags: 用户已有tag
  props: ['tags'],
  computed: {
    tagMap () {
      const tagMap = {}
      this.tagList.forEach(item => tagMap[item.id] = true)
      return tagMap
    }
  },
  data () {
    return {
      roleList: [],
      visible: false,
      currentPage: 1,
      pageSize: 5,
      total: 0,
      // 当前选中的tag
      tagList: []
    }
  },
  created () {
    this.listRoles()
  },
  methods: {
    listRoles () {
      this.myGet('/uc/user/role/list', {page: this.currentPage, size: this.pageSize}).then(data => {
        this.total = data.totalElements
        this.roleList = data.content.map(item => {
          return {
            roleName: item.roleName,
            description: item.description,
            id: item.id
          }
        })
      })
    },
    handleClose () {
      this.visible = false
    },
    handleAdd (i, data) {
      this.tagList.push(data)
    },
    handleRemove (i, data) {
      this.tagList = this.tagList.filter(item => item.id !== data.id)
    },
    confirm () {
      this.$emit('confirm', this.tagList)
      this.handleClose()
    },
    show () {
      this.tagList = this.tags.slice()
      this.visible = true
    },
    hide () {
      this.visible = false
    },
    currentChange (current) {
      this.currentPage = current
      this.listRoles()
    }
  },
  watch: {
    tags (nval) {
      if (!nval) this.tagList = []
      this.tagList = nval.slice()
    }
  }
}
</script>


<style scoped>
  .tag-box .el-tag {
    margin-left: 10px;
  }
</style>
